<template>
  <div class="nots">
		<img :src="success" mode="widthFix" alt="">
		<p class="title">付款后，请联系我们确认订单</p>
    <!-- 充值线下付款不显示该信息 -->
		<div class="pay_detail" v-if="resData.gathering_info && resData.type !==2" v-html="resData.gathering_info"></div>
     <!-- 按钮 -->
    <div class="button">
      <div v-if="resData.type == 2" @click="JumpName('rechargeList')" class="btn red-btn">点击返回充值页面</div>
      <div v-if="resData.type !==2 && resData.is_wx ==1 && resData.store" class="btn">{{resData.new_store_name}}导航</div>
      <div v-if="resData.type !==2" @click="JumpName('order-lists')" class="btn red-btn">返回微信店铺查看订单</div>
    </div>
	</div>
</template>

<script>
import { dlsSuccess } from '@/api/public/index.js'
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      resData: {},
      success: 'http://img.wifenxiao.com/small-wfx/images/success3.png'
    }
  },
  created() {
    this.init()
  },
  beforeCreate() {
    // $('body').addClass('bg_white')
    document.getElementsByTagName('body')[0].classList.add('bg_white')
  },
  destroyed() {
    // $('body').removeClass('bg_white')
    document.getElementsByTagName('body')[0].classList.remove('bg_white')
  },
  methods: {
    init() {
      const data = {}
      if (this.$route.query.id) {
        data.order_id = this.$route.query.id
      }
      if (this.$route.query.type) {
        data.type = this.$route.query.type
      }
      dlsSuccess(data).then(res => {
        if (res.status == 1) {
          this.resData = res.data
        } else {
          this.$Error(res.msg)
        }
      })
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    }
  }
})
</script>

<style lang="scss">
@import 'src/styles/mixin';
.nots{
  overflow: hidden;
  img{
    display: block;
    width: 116px;
    height: 116px;
    margin: 150px auto 30px;
  }
  .title{
    font-size: 36px;
    text-align: center;
    margin-bottom: 25px;
  }
  .pay_detail{
    padding: 0 50px;
    color: #666666;
    img{
      width: 100%;
      height: auto;
    }
    // text-align: center;
  }
  .button{
    padding: 80px 125px;
    // background: #fff;
    .btn{
      line-height:76px;
      height: 76px;
      border:1px solid rgba(242,11,34,1);
      border-radius:38px;
      color: #F20B22;
      font-size: 28px;
      text-align: center; 
      margin-bottom: 30px;
      box-sizing: border-box;
      &.red-btn{
        border: 0;
        color: #fff;
        @include gradient(left,rgba(233,1,4,1),rgba(254,27,73,1));
      }
    }
  }
}
</style>